<template lang="html">
  <div class="global">
    <div class="mask"></div>
    <div class="g-content">
      <div class="header">
        <div class="top staying" v-if="contractData.contract_state == 2"><span class="bg-text">已签约，待入住</span></div>
        <div class="top renting" v-if="contractData.contract_state == 1"><span class="bg-text">履行合同中</span></div>
        <div class="top finish" v-if="contractData.contract_state == 3"><span class="bg-text">合同已结束</span></div>
        <div class="middle" v-show="contractData.contract_state == 2">已开启自动扣费</div>
        <div class="bottom">
          <image v-if="contractData.room_images.length != 0" :src="contractData.room_images[0]"></image>
          <image v-else src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180721/2018072106411915336.jpg"></image>
          <div class="text">
            <span class="one">{{contractData.district_name}}</span>
            <span class="two">{{contractData.fee_rent}}元/月</span>
            <span class="three">入住时间：{{contractData.start_date}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="section">
          <span class="left">合同编号</span>
          <span class="right">{{contractData.contract_no}}</span>
        </div>
        <div class="section">
          <span class="left">合同日期</span>
          <span class="right">{{contractData.start_date}}至{{contractData.end_date}}</span>
        </div>
        <div class="section">
          <span class="left">租金</span>
          <span class="right">{{contractData.fee_rent}}元/月</span>
        </div>
        <div class="section">
          <span class="left">押金</span>
          <span class="right">{{contractData.fee_deposit}}元</span>
        </div>
        <div class="section">
          <span class="left">水费</span>
          <span class="right">{{contractData.fee_water}}元/吨</span>
        </div>
        <div class="section" v-if="contractData.fee_is_jfpg == '0'">
          <span class="left">电费</span>
          <span class="right">{{contractData.fee_electricity}}元/度</span>
        </div>
        <div class="section-jfpg" v-else>
          <span class="ele">电费</span>
          <span class="fee jian">尖: {{contractData.fee_electricity_jian}}元/度</span>
          <span class="fee ping">峰: {{contractData.fee_electricity_feng}}/度</span>
          <span class="fee feng">平: {{contractData.fee_electricity_ping}}元/度</span>
          <span class="fee gu">谷: {{contractData.fee_electricity_gu}}元/度</span>
        </div>
        <div class="section" v-for="item in contractData.fee_other" :key="index">
          <span class="left">{{item.fee_name}}</span>
          <span class="right">{{item.fee}}元/月</span>
        </div>
      </div>
      <div class="content">
        <div class="section">
          <span class="left">姓名</span>
          <span class="right">{{contractData.renter_name}}</span>
        </div>
        <div class="section">
          <span class="left">手机号</span>
          <span class="right">{{contractData.renter_cellphone}}</span>
        </div>
        <div class="section">
          <span class="left">身份证</span>
          <span class="right">{{contractData.renter_identity}}</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="btn" @click="call">联系业主</div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import store from '@/store/store'
export default {
  data () {
    return {
      contractData: {
        'fee_other': [],
        'room_images': []
      }
    }
  },
  onShow () {
    let contractId = this.$root.$mp.query.contract_id
    this.opcontractdetail(contractId)
  },
  methods: {
    opcontractdetail (contractId) {
      var param = {}
      param['contract_id'] = contractId
      const opcontractdetail = api.opcontractdetail(param)
      opcontractdetail.then(d => {
        if (d.code === 200 && d.data !== null) {
          this.contractData = d.data
          this.contractData['contract_no'] = this.contractData.room_id + '' + this.contractData.contract_id
          store.commit('setRenterPhone', this.contractData.renter_cellphone)
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    call () {
      wx.makePhoneCall({
        phoneNumber: this.contractData.cellphone
      })
    }
  }
}
</script>

<style lang="css">
  @import "./contract_detail.css";
</style>
